var that=null
// 定义Tab类
class Tab{
  constructor(id) {
    // 保存Tab实例
    that=this
    // 获取元素
    this.main = document.querySelector(id)
    // 获取添加按钮元素
    this.addBtn = this.main.querySelector('.tabadd')
    // 拿到标题父级元素ul
    this.ul=this.main.querySelector('.fisrstnav ul')
    this.divSec=this.main.querySelector('.tabscon')
    // 实例化时调用初始化方法
    this.init()

  }
  // 初始化
  init() {
    // 获取lis、sections元素
    this.updateNode()
    // 遍历标题
    for (let i = 0; i < this.lis.length; i++) {
      this.lis[i].index = i; //给每个标题一个索引属性
      // 绑定事件,事件处理函数为切换功能的函数
      this.lis[i].addEventListener('click', this.toggleTab)
      // 给删除按钮绑定事件
      this.removes[i].addEventListener('click', this.removeTab)
      this.spans[i].addEventListener('dblclick',this.editTab)
      this.sections[i].addEventListener('dblclick',this.editTab)
    }

    // 给添加按钮绑定事件
    this.addBtn.addEventListener('click', this.addTab)
  }
  // 获取所有动态元素
  updateNode() {
    // 获取所有标题li
    this.lis=this.main.querySelectorAll('li')
    // 获取所有内容元素section
    this.sections = this.main.querySelectorAll('section')
    // 获取所有删除按钮
    this.removes = this.main.querySelectorAll('.icon-guanbi')
    // 获取标题元素span
    this.spans=this.main.querySelectorAll('.fisrstnav li span:first-child')
  }
  // 1.切换功能
  toggleTab() {
    // console.log(this.index);
    that.clearClass() // 清空类名
    // 赋值类名
    this.className = 'liactive'
    that.sections[this.index].className='conactive'
  }
  // 清除类名
  clearClass() {
    for (let i = 0; i < this.lis.length; i++) {
      this.lis[i].className=''
      this.sections[i].className=''
    }
  }
  // 2.添加功能
  addTab() {
    that.clearClass() // 清除类名
    let i = that.lis.length // 获取标题个数
    i++
    // console.log(i++);
    // (1) 创建li元素和section元素
    let nli= '<li class="liactive"><span>测试'+i+'</span><span class="iconfont icon-guanbi"></span></li>'
    let nsection= '<section class="conactive">测试'+i+'</section>'
    // (2) 分别添加到对应的父级元素中
    that.ul.insertAdjacentHTML('beforeend', nli)
    that.divSec.insertAdjacentHTML('beforeend', nsection)
    that.init() // 再次初始化
  }
  // 3.删除功能
  removeTab(e) {
    // 阻止事件冒泡
    e.stopPropagation()
    let index=this.parentNode.index
    // 删除对应节点
    that.lis[index].remove()
    that.sections[index].remove()
    that.init() // 再次初始化
    // 删除的不是选中状态的选项卡时不改变选中状态
    if(document.querySelector('.liactive')) return
    // 删除选中状态的选项卡后让前一个处于选中状态(相当于触发它的点击事件)
    index--
    that.lis[index]&&that.lis[index].click()
  }
  // 4.修改功能
  editTab() {
    // 获取原先的文字
    var str=this.innerHTML
    // 禁止双击选中文字
    window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
    // 把span元素中的文本元素改为input表单
    this.innerHTML = '<input type="text" />'
    // 获取input元素
    var input = this.children[0]
    // 在input中显示原先的文字
    input.value = str
    input.select() // 默认选中input的值
    // 绑定失去焦点事件
    input.onblur = function () {
      // span元素的内容为input的值
      this.parentNode.innerHTML=this.value
    }
    // 绑定回车事件
    input.onkeyup = function (e) {
      if (e.keyCode === 13) {
        this.blur() // 调用失去焦点事件
      }
    }
  }
}

// 实例化Tab
new Tab('#tab')